<template>
  <div>
    <!--  头部搜索  -->
    <el-form :inline="true" :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm">
      <el-form-item label="分类名称：" prop="age" >
        <el-input v-model="ruleForm.ctName"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="region">
        <el-select v-model="ruleForm.status" placeholder="状态" >
          <el-option label="已禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="selectForm(ruleForm)">查询</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="addForm()">添加</el-button>
      </el-form-item>
    </el-form>

    <!--  头部添加弹出层  -->
    <el-dialog title="添加一级" :visible.sync="dialogVisible" width="30%">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"
      ref="">
        <el-form-item
          label="名称"
          prop="ctName"
          :rules="[{ required: true, message: '名称不能为空'}]">
          <el-input v-model="formLabelAlign.ctName"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            type="textarea" resize="none"
            :rows="2"
            placeholder="请输入内容"
            v-model="formLabelAlign.remark" rows="2">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formLabelAlign)">确定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  表格添加弹出层  -->
    <el-dialog title="添加二级" :visible.sync="dialogVisibles" width="30%">
      <el-form :label-position="labelPositions" label-width="80px" :model="formLabelAligns"
               ref="">
        <el-form-item
          label="名称"
          prop="ctName"
          :rules="[{ required: true, message: '名称不能为空'}]">
          <el-input v-model="formLabelAligns.ctName"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            type="textarea" resize="none"
            :rows="2"
            placeholder="请输入内容"
            v-model="formLabelAligns.remark" rows="2">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForms(formLabelAligns)">确定</el-button>
          <el-button @click="dialogVisibles = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  表格编辑弹出层  -->
    <el-dialog title="编辑" :visible.sync="compile" width="30%">
      <el-form :label-position="labelPositions" label-width="80px" :model="compiles"
               ref="">
        <el-form-item
          label="名称"
          prop="ctName"
          :rules="[{ required: true, message: '名称不能为空'}]">
          <el-input v-model="compiles.ctName"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="ctSort">
          <el-input-number v-model="compiles.ctSort" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea" resize="none"
            :rows="2"
            placeholder="请输入内容"
            v-model="compiles.remark" rows="2">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitEditing(compiles)">确定</el-button>
          <el-button @click="compile = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  表格  -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="ctId"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="ctId"
        label="序号"
        width="180" type="expand-icon">
      </el-table-column>
      <el-table-column
        prop="ctName"
        label="分类名称"
        width="180" sortable >
      </el-table-column>
      <el-table-column
        width="180"
        prop="status"
        label="状态"
        align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="handleChangeStatusId(scope.row.ctId, scope.row.status)"
            :active-value="1"
            :inactive-value="0"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="禁用"
            inactive-text="正常">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="ctSort"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注">
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope" >
            <span v-if="scope.row.menu==0">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row.ctId)">添加</el-button>
            </span>
          <span v-else>
            <el-button
              size="mini"
              type="primary"
              disabled
              @click="handleEdit(scope.row.menu)">禁用</el-button>
          </span>
          <el-button
            size="mini"
            type="success"
            @click="handleDelete(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      ctrl:{
        load:false
      },
      tableData: [{
        id: '',
        ctId: '',
        ctName: '',
        menu:'',
        status: '',
        ctSort: '',
        remark: '',
        children: [{
          id: '',
          ctId: '',
          ctName: '',
          menu:'',
          status: '',
          ctSort: '',
          remark: '',
        }]
      }],
      dialogVisible:false,
      dialogVisibles:false,
      compile:false,

      formLabelAlign: {
        ctName:'',
        remark:'',
      },
      compiles:{
        ctName:'',
        remark:'',
        ctId:'',
        ctSort:'',
      },
      formLabelAligns: {
        ctName:'',
        remark:'',
        ctId:'',
        menu:'',
      },
      ruleForm: {
        ctName: '',
        status:''
      },
    };
  },
  created() {
    this.query();
  },
  /**
   * 查询
   * @param formName
   */
  methods: {
    query(){
      this.$axios.get("/jiaoYu/course-type/inquire").then(r => {
        this.tableData=r.data
        //alert(JSON.stringify())
        /*for (var i=0;i<this.tableData.length;i++){
          //alert(JSON.stringify(this.tableData[i]))
        }*/

      })
    },

    addForm() {
      this.dialogVisible=true;
    },
    selectForm(){
      this.demand();
    },

    /**
     * 模糊查询
     * @param formName
     */
    demand(){
      alert(this.tableDataS)
      this.$axios.post("/jiaoYu/course-type/obscure",qs.stringify(this.ruleForm)).then(r => {
        this.tableData=r.data
      })
    },
    handleEdit(scop){
      //alert(scop)
      this.formLabelAligns.menu=scop
      this.formLabelAligns.ctId=scop;
      this.dialogVisibles=true;
    },
    handleDelete(r){
      this.compiles.ctId=r.ctId,
      this.compiles.remark=r.remark,
      this.compiles.ctName=r.ctName,
      this.compiles.ctSort=r.ctSort,
      this.compile=true;
    },
    /**
     * 二级菜单添加
     * @param formName
     */
    submitForms(){
      this.$axios.post("/jiaoYu/course-type/addTwo",qs.stringify(this.formLabelAligns)).then(r => {
        //alert(r.data)
        if (r.data==1){
          this.$message({
            type:'success',
            message:"二级菜单添加成功！",
          });
          this.dialogVisibles=false;
          //alert("添加成功")
          this.query();
        }
      })
    },

    /**
     * 编辑
     * @param formName
     */
    onSubmitEditing(r){
      this.$axios.post("/jiaoYu/course-type/compile",qs.stringify(this.compiles)).then(r => {
        if (r.data==1){
          this.$message({
            type:'success',
            message:"一级菜单添加成功！",
          });
          this.compile=false;
          //alert("添加成功")
          this.query();
        }
      })
    },
    /**
     * 一级菜单添加
     * @param formName
     */
    submitForm(){

      this.$axios.post("/jiaoYu/course-type/addStair",qs.stringify(this.formLabelAlign)).then(r => {
        if (r.data==1){
          this.$message({
            type:'success',
            message:"一级菜单添加成功！",
          });
          this.dialogVisible=false;
          //alert("添加成功")
          this.query();
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * 更改状态
     * @param formName
     */
    handleChangeStatusId(ctId, status) {
      const title = { 0: '正常', 1: '禁用' }
      this.$confirm(`确定要${title[status]}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeStatusId(ctId, status)

      }).catch(() => {

      })
      this.query()
    },
    // 请求更新状态方法
    changeStatusId(ctId, status) {
      //alert(ctId+"SS"+status)
      this.ctrl.load = false

      this.$axios.get(`/jiaoYu/course-type/status/ctId/${ctId}/status/${status}`).then(res => {
        //alert(111)
        this.ctrl.load = false
        if (res.code == 200 && res.data == true) {
          const msg = { 1: '禁用成功', 0: '启用成功' }
          this.$message({
            type: 'success',
            message: msg[status]
          });
          this.query()
        } else {
          const msg = { 1: '禁用成功', 0: '启用成功' }
          this.$message({
            type: 'error',
            message: msg[status]
          });
          this.query()
        }
      }).catch(() => {
        this.query()
        this.ctrl.load = false
      })
    },
  }
}
</script>

<style scoped>

</style>
